---
// TimelineIcon.astro
interface Props {
  icon: {
    type: 'emoji' | 'icon' | 'color' | 'number' | 'image'
    value: string
    fallback?: string
  }
  index: number
}

const { icon, index } = Astro.props
---

<div class="relative z-10 size-7 flex justify-center items-center">
  {icon.type === 'emoji' && <span class="text-xl leading-none block select-none">{icon.value}</span>}

  {icon.type === 'icon' && <i class={`${icon.value} text-lg text-primary`} />}

  {icon.type === 'color' && <div class={`w-3 h-3 rounded-full ${icon.value}`} />}

  {icon.type === 'number' && <span class="text-sm font-bold text-primary">{icon.value || index + 1}</span>}

  {icon.type === 'image' && <img src={icon.value} class="w-6 h-6 rounded-full object-cover border border-gray-200" alt="" />}
</div>
